<template>
	<view>
		<view class="pl20 pr20 v100 overauto"
			:style="{ backgroundImage: 'url(' + cosImageUrl('head_bg.png',true) + ')'}">
			<view class="" :style="{'paddingTop':statusBarHeigh + 'px',}">
				<view class="flex alicen pl20" :style="{'height':menuButtonInfo.height + 'px',}">
					<u-icon name="arrow-left" color="#070707" size="18" @click="goback()"></u-icon>
				</view>
			</view>
			<view class="txtcen">
				<view class="fz60 bold col40">专家一对一填报服务</view>
				<view class="pb20"></view>
				<view class="fz32 bold">量身定制志愿填报方案</view>
			</view>
			<view class="pb20"></view>
			<view class="pt30 pb30 pl20 pr20 ius20 bgf8efe1">
				<view v-for="(item,index) in list" :key="index"
					class="overauto flex alicen mb20 between pt20 pb20 pl20 pr20 bgsize100b"
					:style="{ backgroundImage: 'url(' + cosImageUrl('price.png', true) + ')'}"
					@click.stop="slectPrice(item,index)">
					<view class="">
						<view class="fz50 bold col666ce9">{{item.parice}}</view>
						<view class="fz28 bold col878c97 text-word-break-1">{{item.planner}}</view>
					</view>
					<image class="w48 h48"
						:src="currIndex == index?cosImageUrl('check.png', true):cosImageUrl('nocheck.png', true)"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="pb20"></view>
			<view class="pt20 pb20 fz36 bold pl20 pr20 ius100 flexCenter col663500 bgffd36f" @click.stop="payprice">立即支付
			</view>
			<view class="pb10"></view>
			<view class="ml20 fz24 flex alicen">
				<image class="w40 h40" @click.stop="changeread()"
					:src="isRead?cosImageUrl('check.png',true):cosImageUrl('nocheck.png',true)" mode="aspectFill">
				</image>
				<text class="col33 ml10">我已阅读同意</text>
				<text class="col40">《支付协议》</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getVipPrice,
		miniLogin,
		onVipPay
	} from "@/utils/api/user.js"
	import jwx from '../../utils/jwx.js'

	export default {
		data() {
			return {
				currIndex: 0,
				isRead: false,
				openid: this.readData('userdata').openid,
				list: [{
						parice: 0,
						planner: ' 终审志愿填报方案',
					},
					{
						parice: 0,
						planner: ' 3-5年经验以上的规划师',
					},
					{
						parice: 0,
						planner: ' 5年经验以上的规划师',
					},
					{
						parice: 0,
						planner: ' 10年经验以上的规划师',
					}
				],
			}
		},
		onShow() {
			this.seeOpenid();
			this.vipprice();

		},
		methods: {
			vipprice() {
				getVipPrice({
					priceClass: 'export'
				}).then(res => {
					console.log('res', res.data)
					this.list[0].parice = res.data.price1
					this.list[1].parice = res.data.price2
					this.list[2].parice = res.data.price3
					this.list[3].parice = res.data.price4
				});

			},
			slectPrice(item, index) {
				if (this.currIndex == index) return;
				this.currIndex = index
			},
			async payprice() {
				let data = this.list[this.currIndex]
				if(!this.isRead) return this.showMsg('请同意支付协议')
				let params = {
					payType: "WXMpPay",
					vipPrice: data.parice, // 这里动态设置金额
					userId: this.readData('useId'),
					priceClass: 'expert',
					openid: this.openid,
					// vipId: 1
				}
				let payres = await this.request.post('/api/user/vip-pay', params)
				console.log('payres', payres)
				if (payres.code == 200) {
					payres.data.wxJsApiPayOrderInfo.userId = this.readData('useId');
					payres.data.wxJsApiPayOrderInfo.orderNo = payres.data.orderNo;
					await jwx.wxpay(payres.data.wxJsApiPayOrderInfo, (status, result) => {
						console.log('result', result); // 支付成功的回调 可以自行设置，例如跳转某一个支付成功页面，保存订单号等等。
						that.back('1')
					})
				}
			},
			changeread(){
				this.isRead = !this.isRead
			},
			//查看open 如果没有去获取openid
			seeOpenid() {
				let that = this
				let oprnid = that.openid
				if (oprnid) return;
				wx.login({
					async success(res) {
						if (res.code) {
							await miniLogin({
								code: res.code,
								userId: that.readData('useId'),
							}).then(data => {
								console.log('data', data)
								this.openid = data.data.openid
							})
						}
					}
				})
			}
		}

	}
</script>

<style lang="scss">

</style>